<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/config.css">
		<style>
			body{
				background: #333333;
				color: #fff;
			}
			@media screen and (max-width: 800px) {
				.masonry {
					column-count: 2; // two columns on larger phones
				}
			}

			@media screen and (max-width: 500px) {
				.masonry {
					column-count: 1; // two columns on larger phones
				}
			}
			.head {
				width: 100vw;
				height: 6vh;
				float: left;
				background: #000000;
				font-size: 6vw;
				line-height: 6vh;
				text-align: center;
				box-shadow:inset 0 0 10px #0f0;
				border: #007AFF 1px solid;
				position: fixed;
				top: 0;
				color: #007AFF;
				z-index: 99;

			}
			.masonry {
				-moz-column-count: 2;
				/* Firefox */
				-webkit-column-count: 2;
				/* Safari 和 Chrome */
				column-count: 2;
				-moz-column-gap: 2vw;
				-webkit-column-gap: 2vw;
				column-gap: 2vw;
				width: 100%;
				margin: 1vw auto;
			}

			.item {
				box-shadow:inset 0 0 10px #0f0;
				border: #007AFF 1px solid;
				border-radius: 1vw;
				font-size: 4vw;
				padding: 2vw;
				margin-bottom: 2vw;
				-moz-page-break-inside: avoid;
				-webkit-column-break-inside: avoid;
				break-inside: avoid;
				background: rgba(155,133,144,0.5);
			}
			.images {
				border-radius: 1vw;
			}
			.user-parent {
				position: relative;
				margin-top: 1vw;
				}
			.user-heard {
				
				position: absolute; top: 0vw; left: 2.5rem; margin-top: 1vw;width: 30vw; overflow: hidden;
			}
			.user-icon {
				margin-top: 1vw; border-radius: 20vw;
			}
			.user-name {
				font-size:1vw;
			}
			.user-time {
				line-height: 2vw;
				font-size:0.4vw; color: #C0C0C0;
			}
			.mui-content {
				background: #333333;
				
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: #000000; ">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="color: #FFFFFF;">我的点赞</h1>
		</header>
		<div id="refreshContainer" class=" mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div id="masonry" class="masonry">
					
					<!-- more items -->
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/mui.js"></script>
	<script src="../../js/jquery-1.4.2.min.js"></script>
	<script src="../../js/template-web.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/config.js"></script>
	<script  type='text/html' id="tab-message">
		 {{each rows}}
		 <div class="item" id="{{$value.respVo.id}}" data = "{{$value}}">
		 	<div class="item_content">
		 		<img class="images" src="{{$value.respVo.imageRecognitionRespVo.imagePath}}" width="100%" />
		 		<div>{{$value.respVo.title}}</div>
		 		<div class="user-parent" style="position: relative;">
		 			<img class="user-icon" src="{{$value.respVo.userRespVo.headImageUrl}}" onerror="javascript:this.src='../../images/nickname.png'" width="30px" height="30px">
		 			<div class="user-heard">
		 				<div class="user-name">{{$value.respVo.userRespVo.nickname}}</div>
		 				<div class="user-time">{{$value.respVo.createdTime}}</div>
		 			</div>
		 		</div>
		 	</div> 
		 </div>
		 {{/each}}
	</script>
	<script type="text/javascript">
		mui.init({
			pullRefresh: {
				container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				down: {
					
					style: 'circle',
					callback: pulldownRefresh
				},
				up: {
					auto: true,
					style: 'circle',
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});

		options = {
			scrollY: true, //是否竖向滚动
			scrollX: false, //是否横向滚动
			startX: 0, //初始化时滚动至x
			startY: 0, //初始化时滚动至y
			indicators: true, //是否显示滚动条
			deceleration: 0.5, //阻尼系数,系数越小滑动越灵敏
			bounce: true //是否启用回弹
		}



 
		var user = app.getUserInfo();
		var count = 0;
		var pase = {
			"page":0,
			"rows":10,
			"createdBy":user.userId,
			};
			function init(data) {
				mui.ajax(app.getUrl() + "giveUp/findPage", {
					type: 'POST',
					dataType: 'json',
					contentType: "application/json;charset=UTF-8",
					data: data,
					success: function(res) {
						console.log(JSON.stringify(res))
						if (res.errCode === "000000") {
						    htmlstr = template('tab-message', res.data);
							var tul = document.getElementById("masonry");
							tul.innerHTML += htmlstr;
							if(res.data.total < pase.rows || res.data.rows.length <= 0) {
								mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
							}
						}
					},
					error: function(res) {
						mui.alert('与服务器断开连接!请重新登录', function() {
							// plus.webview.getWebviewById("index").close();
						});
					}
				});
			}
		
		function pullupRefresh() {
				pase.page += 1;
				init(pase);
				mui('#refreshContainer').pullRefresh().endPullupToRefresh(count > 0);
		}
		
		/**
		 * 下拉刷新具体业务实现
		 */
		function pulldownRefresh() {
			var tul = document.getElementById("masonry");
			count = 0;
			tul.innerHTML = "";
			pase.page = 0;
			init(pase);
			mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
			mui('#refreshContainer').pullRefresh().refresh(true);
			
		}
		
		
		mui.plusReady(function() {
		mui("#masonry").on('tap', '.item', function() {
			var data = this.getAttribute("data");
			localStorage.setItem("shareDetailed",JSON.stringify(JSON.parse(data).respVo));
			
			var html = '../share/share_detailed.html';
			var id = 'share_detailed';
			w = plus.webview.create(html, id, {
				hardwareAccelerated: true,
				scrollIndicator: 'none', 
				scalable: true,
				bounce: 'all'
			});
			w.show('pop-in');
			
			});
			});
	</script>
</html>
